<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <div class="search-wrapper">
      <el-row>
        <el-col :span="24">
          <li style="padding-left:10px;">
            <el-button  type="primary" @click="handlerAcceptBatch()">同意受理</el-button>
            <el-button type="danger" @click="handlerRefuseBatch()">拒绝受理</el-button>
          </li>
        </el-col>
      </el-row>

      <ul class="search-box">
        <li><span class="filter-name">事件类型：</span>
          <el-select v-model="listQuery.typeId" placeholder="请选择" clearable style="width:130px" class="filter-item">
            <el-option v-for="(item,index) in Options" :key="index" :label="item.typeName" :value="item.typeId"/>
          </el-select></li>
        <li><span class="filter-name">事件来源：</span>
          <el-select v-model="listQuery.eSource" placeholder="请选择" clearable style="width:150px" class="filter-item">
            <el-option v-for="(item,index) in  eSourceOption" :key="index" :label="item.dictName" :value="item.dictValue"/><!--用的字典-->
          </el-select></li>
        <li><span class="filter-name">所属河道：</span><!--可能会用字典不用联表-->
          <el-select v-model="listQuery.riverId" placeholder="请选择" clearable style="width:150px" class="filter-item">
            <el-option v-for="(item,index) in  Options" :key="index" :label="item.riverName" :value="item.riverId"/>
          </el-select></li>

        <li><span class="filter-name">上报时间：</span>
          <el-date-picker v-model="listQuery.createTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"/></li>
        <li style="padding-left:10px;">
        <el-button style="vertical-align:middle;margin-top:-2px;" round size="mini"
                   type="primary" @click="getList()">查询</el-button>
      </li>
      </ul>

    </div>
    <div class="data-wrapper">
      <template v-if="tableData!=null">
        <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="全选" width="55">
          </el-table-column>
          <el-table-column type="index" label="序号" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="eCode" label="事件编号"  width="180">
          </el-table-column>
          <el-table-column prop="eName" label="事件名称"  width="180">
          </el-table-column>
          <el-table-column prop="typeName" label="事件类型"  width="180"><!--联表字段-->
          </el-table-column>
          <el-table-column prop="eSource.name" label="事件来源">
          </el-table-column>
          <el-table-column prop="username" width="150" label="上报人">
          </el-table-column>
          <el-table-column prop="createTime" label="上报时间">
          </el-table-column>
          <el-table-column prop="riverName" label="所属河道"  width="120"><!--联表字段-->
          </el-table-column>
          <el-table-column prop="riverManage" label="责任河长"  width="120">
          </el-table-column>
          <el-table-column prop="handleState" label="当前状态":formatter="formatState">
          </el-table-column>
          <el-table-column prop="'查看'" label="事件详情"><!--地图功能-->
            <template slot-scope="scope">
              <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle
                         @click="handleView(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
          <el-table-column label="查看">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handlerAccept(scope.$index, scope.row)">受理</el-button>
              <el-button size="mini" type="danger" @click="handlerRefuse(scope.$index, scope.row)">拒绝</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
    </div>
    <!-- 分页和导出功能-->
    <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="4">
        <div class="grid-content">
          <el-button type="primary">批量导出</el-button>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.currentPage"
                         :page-sizes="pageSizes"
                         :page-size="listQuery.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dataCount"/>
        </div>
      </el-col>
    </el-row>
    <!--单选受理选择级别弹出框-->
    <el-dialog title="事件级别选择" :visible.sync="dialogFormAccept">
      <el-form :model="form">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="事件级别" :label-width="formLabelWidth">
              <el-select v-model="form.eGrade" placeholder="请选择">
                <el-option label="一级事件" value="1"></el-option>
                <el-option label="二级事件" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormAccept = false">取 消</el-button>
        <el-button size="small" type="primary" @click="acceptOne()">确 定</el-button>
      </div>
    </el-dialog>
    <!--单选拒绝信息弹出框-->
    <el-dialog title="拒绝信息" :visible.sync="dialogForm" width="40%">
      <el-form :model="form">
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="拒绝理由" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.refuseInfo" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogForm = false">取 消</el-button>
        <el-button size="small" type="primary" @click="refuseOne()">确 定</el-button>
      </div>
    </el-dialog>
    <!--批量受理信息框-->
    <el-dialog title="事件级别选择" :visible.sync="dialogBatchFormAccept">
      <el-form :model="batchForm">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="事件级别" :label-width="formLabelWidth">
              <el-select v-model="batchForm.eGrade" placeholder="请选择">
                <el-option label="一级事件" value="1"></el-option>
                <el-option label="二级事件" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogBatchFormAccept = false">取 消</el-button>
        <el-button size="small" type="primary" @click="acceptBatch()">确 定</el-button>
      </div>
    </el-dialog>
    <!--批量拒绝信息框 -->
    <el-dialog title="拒绝信息" :visible.sync="dialogBatchForm" width="40%">
      <el-form :model="batchForm">
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="拒绝理由" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="batchForm.refuseInfo" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click=" dialogBatchForm = false">取 消</el-button>
        <el-button size="small" type="primary" @click="refuseBatch()">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看弹出框-->
    <el-dialog title="查看" :visible.sync="dialogVisible">
      <el-form v-if="oneCol">
        <el-row :gutter="10">
          <el-col :span="12">
            创建人: {{oneCol.createUser}}
          </el-col>
          <el-col :span="12">
            事件类型：{{oneCol.typeId}}
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            事件名称：{{oneCol.name}}
          </el-col>
          <el-col :span="12">
            事件状态：{{oneCol.handleState}}
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        data(){
            return{
                tableData:null,//所有数据
                loading: false,//载入中显示flag
                currentPage:1,//当前页数
                pagesize:10,//分页数
                listSelect:[],//被选中的对象列表
                searchInput:" ",//搜索框内容
                dataCount: 100,//默认数据总数,总条数
                pageSizes: [5, 10, 20, 30, 40],//选择每页数据量
                listQuery: {//查询条件
                    currentPage: 1,
                    pageSize: 5,
                    typeId:'',
                    eSource:'',
                    riverId:'',
                    riverManage:'', //这个没用但是不能删，和list用的一个方法，删了检测会报错
                    handleState:'',
                    createTime:null,
                },
                refuseInfo:"",//拒绝受理信息
                Options:[],//总的下拉菜单
                eSourceOption:[],//事件来源下拉框-字典
                dataIndex:null,//,还没用上
                formLabelWidth: '100px',//弹出框样式属性
                dialogFormAccept:false,//单项受理级别选择弹出框
                dialogBatchFormAccept:false,//批量受理级别选择弹出框
                dialogForm:false,//拒绝受理填写信息弹窗
                dialogBatchForm:false,//批量拒绝受理填写信息弹窗
                dialogVisible:false,//单行查看弹出框flag
                oneCol:{//单行的选中数据，初始值为当前行数据
                    // name:{},//事件名称
                    eId:{},//事件类型ID
                    // createUser:{},//事件创建人
                    // handleState:{}//事件状态
                },
                form:{},//弹出框表单
                batchForm:{},//批量弹出框表单
                pickerOptions2: {//时间下拉菜单功能
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

            }
        },
        methods:{
            getList() {//请求数据库获取列表
                this.loading = true;
                this.postRequest('/api/rcs/eventsAccept',this.listQuery).then((res)=>{
                    var data = res.data;
                console.log(data)
                if (data.status == 200) {
                    this.tableData = data.data;
                    this.dataCount = data.count;
                } else {
                    this.$message.error(data.msg);
                    this.tableData = data.data;//无数据
                }
                this.loading = false;
            }).catch(error => {//错误信息
                    this.$message.error(error);
            });
            },
            getOptions(){
                this.getRequest('/api/rcs/eventsOption',this.listQuery).then((res)=>{
                    var data = res.data;
                    if (data.status == 200) {
                        this.Options=data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false;
                }).catch(error => {//错误信息
                    this.$message.error(error);
                });
            },
            editOne(index,flag,info,grade){//编辑事件，受理或者拒绝.拒绝要写拒绝信息，在后面
                this.$confirm("确认操作？").then(_ => {
                    this.postRequest("/api/rcs/eventEdit", {
                    eId:index.eId,
                    handleState:flag,
                    refuseInfo:info,
                    eGrade:grade,
                }).then((res) => {
                    var data = res.data;
                this.$message.success("操作成功");
                this.dialogForm=false,
                    this.getList();
            }).catch((error) => {
                    this.$message.error(error);
            });
            }).catch(() => {
                    this.$message("取消操作");
            });
            },
            acceptOne(){//单项受理

                this.editOne(this.oneCol,1,null,this.form.eGrade);//进行提交
                this.dialogFormAccept=false;
            },
            refuseOne(){//单项拒绝
                console.log('res'+this.form.refuseInfo)
                if(this.oneCol.handleState==8){
                    this.$message.error("该事件已被拒绝受理");
                }
                this.editOne(this.oneCol,8,this.form.refuseInfo);//第四个参数为等级信息，拒绝不填
                this.form.refuseInfo=null;
            },
            acceptBatch(){//批量受理
                for(var i=0;i<this.listSelect.length;i++){
                    if(this.listSelect[i].handleState==1){
                        this.$message.error("有事件已被受理");
                        return;
                    }else {
                        this.listSelect[i].eGrade=this.batchForm.eGrade;
                        this.listSelect[i].handleState=1;//批量方法batchEdit只能改状态，所以这里只能用自己的
                    }
                }
                this.$confirm("确认批量受理？").then(_ => {
                    this.postRequest("/api/rcs/eventEdits",this.listSelect).then((res) => {
                        var data = res.data;
                        this.$message.success("批量受理成功");
                        this.getList();
                    }).catch((error) => {
                        this.$message.error(error);
                    });
                }).catch(() => {
                    this.$message("取消操作");
                });
                this.batchForm.eGrade=null;
                this.dialogBatchFormAccept=false;
            },

            refuseBatch(){//批量拒绝
                console.log(this.batchForm.refuseInfo);
                for(var i=0;i<this.listSelect.length;i++){
                    this.listSelect[i].refuseInfo=this.batchForm.refuseInfo;
                    if(this.listSelect[i].handleState==8){
                        this.$message.error("有事件已被拒绝");
                        return;
                    }else {
                        this.listSelect[i].handleState=8;//批量方法batchEdit只能改状态，所以这里只能用自己的
                    }
                }
                this.$confirm("确认批量拒绝？").then(_ => {
                    this.postRequest("/api/rcs/eventEdits",this.listSelect).then((res) => {
                    var data = res.data;
                this.$message.success("批量拒绝成功");
                this.getList();
            }).catch((error) => {
                    this.$message.error(error);
            });
            }).catch(() => {
                    this.$message("取消操作");
            });
                this.batchForm.refuseInfo=null;
                this.dialogBatchForm=false;
            },

            handleView(index,row){//单行查看弹窗显示赋值
                this.dialogVisible=true;
                this.oneCol=row;
            },

            formatState: function(row, column) {//显示状态
                return row.handleState == 0 ? "已完成" :
                    row.handleState==8?"已拒绝":
                        row.handleState==1?"已受理" :
                            row.handleState==9?"处置中":
                                row.handleState==5?"待确认":
                                    row.handleState==7?"督办中":
                                        row.handleState==6?"督办完成":
                                            "待处理";//-1
            },
            indexMethod(index) {//序号递增
                // return index+1;
                return (index+1)+(this.listQuery.currentPage-1)*this.listQuery.pageSize;
            },
            handlerAccept(index,row){//单行受理弹出框及效验
                if(row.handleState==1){
                    this.$message.warning("该事件已被受理");
                    return;
                }
                this.oneCol=row;
                this.dialogFormAccept=true;
                // editOne(this.oneCol,1);//第三个参数为删除信息，不填
            },

            handlerRefuse(index, row){//单行拒绝受理弹出框及效验
               if(row.handleState==8){
                   this.$message.warning("该事件已被拒绝");//效验
                   return;
               }
                this.dialogForm=true;
                this.oneCol=row;
            },
            handlerAcceptBatch(){//批量受理弹窗信息显示
                if(this.listSelect.length==0){
                    this.$message.warning("未选择事件");
                }else{
                    this.dialogBatchFormAccept=true;
                }
            },
            handlerRefuseBatch(){//批量拒绝受理弹窗显示
                if(this.listSelect.length==0){
                    this.$message.warning("未选择事件");
                }else{
                    this.dialogBatchForm=true;
                }
            },
            handleSizeChange: function (size) {//每页个数改变
                // this.pagesize = size;
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.getList();
            },
            handleCurrentChange: function(currentPage){//得到当前
                // this.currentPage = currentPage;
                this.listQuery.currentPage = currentPage;
                this.dataIndex=this.listQuery.currentPage*this.listQuery.pageSize;
                this.getList();
            },
            //选中
            handleSelectionChange(val) {
                this.listSelect=val;
            }

        },
        created() {//构造时调用,向数据库请求设备列表
            this.getList();
            this.getDictionary({types:["EVENT_REPORT"]}).then(res => {//获取事件来源下拉
                var data = res.data;
                if (data.status == 200) {

                    this.eSourceOption= data.data["EVENT_REPORT"];

                } else {
                    this.$message.error(data.msg);
                }
            }).catch(error => {
                this.$message.error(error);
            });
           this.getOptions();
        },
        mounted(){},
        updated(){},
        destroyed(){},
    }
</script>

<style scoped>

</style>